<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view class="child-view" style="height: 100%"/>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      transitionName:'',
    }
  },
  watch: {//使用watch 监听$router的变化
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if(to.meta.index > from.meta.index){
        //设置动画名称
        this.transitionName = 'slide-left';
      }else{
        this.transitionName = 'slide-right';
      }
    }
  },
}
</script>

<style>
  *{
    margin: 0;
    padding: 0;
  }
  a{
    text-decoration: none;
  }
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    background: #fbf9fe;
  }
  /*.slide-right-enter-active,*/
  /*.slide-right-leave-active,*/
  /*.slide-left-enter-active,*/
  /*.slide-left-leave-active {*/
    /*will-change: transform;*/
    /*transition: all 200ms;*/
    /*position: absolute;*/
  /*}*/
  /*.slide-right-enter {*/
    /*opacity: 0;*/
    /*transform: translate3d(-100%, 0, 0);*/
  /*}*/
  /*.slide-right-leave-active {*/
    /*opacity: 0;*/
    /*transform: translate3d(100%, 0, 0);*/
  /*}*/
  /*.slide-left-enter {*/
    /*opacity: 0;*/
    /*transform: translate3d(100%, 0, 0);*/
  /*}*/
  /*.slide-left-leave-active {*/
    /*opacity: 0;*/
    /*transform: translate3d(-100%, 0, 0);*/
  /*}*/

  .child-view {
    position: absolute;
    left: 0;
    /*top: 0;*/
    width: 100%;
    /*height: 100%;*/
    transition: all .3s cubic-bezier(.55,0,.1,1);
  }
  .slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(50px, 0);
    transform: translate(50px, 0);
  }
  .slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-50px, 0);
    transform: translate(-50px, 0);
  }

  /*按钮波纹*/
  .ripple {
    position: relative;
    /*隐藏溢出的径向渐变背景*/
    overflow: hidden;
  }
  .ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    /*设置径向渐变*/
    background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .3s, opacity .5s;
  }
  .ripple:active:after {
    transform: scale(0.5, 0.5);
    opacity: .3;
    /*设置初始状态*/
    transition: 0s;
  }

  /*图片模糊化*/
  .blurImg{
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    filter: blur(15px);
  }
</style>
